<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四周边框</title>

        <style type="text/css">
            .wrapper {
                width: 500px;
                height: 300px ;
                margin: 15px auto ;
            }

            .first {
                border: 10px double blue ; /* 粗细(width)  样式(style)  颜色(color) */
            }

            .second {
                border-width: 10px ; /* 单独设置边框的 粗细 */
                border-style: double ; /* 单独设置边框的 样式 */
                border-color: red ; /* 单独设置边框的 颜色 */
            }

            .second:hover {
                border-color: black ;
            }
        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>
        
    </body>
</html>